<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box1">message</div>
<a href="#">主页</a>
</body>
<script>
  /***
   * 选择器：
   *   id class tagName name
  * */
  var box1=  document.getElementById('box1');
  // 1. 改变属性
  /***
   *  1. 普通属性
   *  2. 样式  ： style class
   *  3. 事件
   * */
  box1.id = "test";
  var link = document.getElementsByTagName('a')[0];
  link.href = "test.html";

 // box1.style.display = "none";
   // box1.style.color ='red';

  //box1.className = "box success";
     box1.classList.add('box');
     box1.classList.add('success');

     box1.onclick = function(){
        alert(this.innerHTML);
     }

  /**
   * 2. 改变内容
   * */
  box1.innerText = "hello world!";
  box1.innerHTML = "<div><h1>hello</h1></div>"; //字符串拼接html——能，但不推荐




</script>


</html>